//查询所有考试
<template>
    <div class="exam">
        <el-table :data="pagination.records" border>
            <el-table-column fixed="left" prop="source" label="试卷名称" width="180"></el-table-column>
            <el-table-column prop="description" label="介绍" width="200"></el-table-column>
            <el-table-column prop="institute" label="所属学院" width="120"></el-table-column>
            <el-table-column prop="major" label="所属专业" width="200"></el-table-column>
            <el-table-column prop="grade" label="年级" width="100"></el-table-column>
            <el-table-column prop="examDate" label="考试日期" width="120"></el-table-column>
            <el-table-column prop="totalTime" label="持续时间" width="120"></el-table-column>
            <el-table-column prop="totalScore" label="总分" width="120"></el-table-column>
            <el-table-column prop="type" label="试卷类型" width="120"></el-table-column>
            <el-table-column prop="tips" label="考生提示" width="400"></el-table-column>
            <!-- <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row.examCode)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.examCode)" type="danger" size="small">删除</el-button>
          <el-button @click="add(scope.row.paperId,scope.row.source)" type="primary" size="small">增加题库</el-button>
        </template>
            </el-table-column>-->
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <div style="display: flex; justify-content: space-between;">
                        <el-button @click="edit(scope.row.examCode)" type="primary" size="small">编辑</el-button>
                        <el-button
                            @click="deleteRecord(scope.row.examCode)"
                            type="danger"
                            size="small"
                        >删除</el-button>
                        <el-button
                            @click="edit2(scope.row.examCode)"
                            type="primary"
                            size="small"
                        >增加题库</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[4, 8, 10, 20]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            class="page"
        ></el-pagination>
        <!-- 编辑对话框-->
        <!-- 只有考试名称，考试介绍，考试时间，考试日期，考试提示是可以编辑的内容，其余不可修改 -->
        <!-- 这是第一个对话框，来修改试卷信息 -->
        <el-dialog
            title="编辑试卷信息"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose"
        >
            <section class="update">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="试卷名称">
                        <el-input v-model="form.source"></el-input>
                    </el-form-item>
                    <el-form-item label="介绍">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="所属学院">
            <el-input v-model="form.institute"></el-input>
          </el-form-item>
          <el-form-item label="所属专业">
            <el-input v-model="form.major"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="form.grade"></el-input>
                    </el-form-item>-->
                    <el-form-item label="考试日期">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.examDate"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="持续时间">
                        <el-input v-model="form.totalTime"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="总分">
            <el-input v-model="form.totalScore"></el-input>
                    </el-form-item>-->
                    <el-form-item label="试卷类型">
                        <el-input v-model="form.type"></el-input>
                    </el-form-item>
                    <el-form-item label="考生提示">
                        <el-input type="textarea" v-model="form.tips"></el-input>
                    </el-form-item>
                </el-form>
            </section>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 设置后端模型自动出题的参数 -->

        <el-dialog
            title="编辑题目详情"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose"
        >
            <section class="update2">
                <el-form ref="form1" :model="info" label-width="80px">
                    <el-form-item label="试卷类型">
                        <el-select v-model="info.type" placeholder="请选择试卷科目">
                            <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="简单题百分比">
                        <el-input v-model="info.simple" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="中档困难题百分比">
                        <el-input v-model="info.normal" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="简单题百分比">
                        <el-input v-model="info.diff" placeholder=""></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="难度选择">
                        <el-select v-model="info.difficulty" placeholder="请选择试卷难度">
                            <el-option
                                v-for="item in difficultys"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="客观题数量">
                        <el-input v-model="info.num1" placeholder="请输入客观题数量"></el-input>
                    </el-form-item>
                    <el-form-item label="问答题题数量">
                        <el-input v-model="info.num2" placeholder="请输入问答题数量"></el-input>
                    </el-form-item>
                    <el-form-item label="材料题数量">
                        <el-input v-model="info.num3" placeholder="请输入材料题数量"></el-input>
                    </el-form-item>
                    <el-form-item label="考试范围">
                        <el-input v-model="info.theme" placeholder="请输入考试范围"></el-input>
                    </el-form-item>
                </el-form>
            </section>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //新建一个数据结构，来传递相关试卷的参数
            info: {},
            form: {}, //保存点击以后当前试卷的信息
            pagination: {
                //分页后的考试信息
                current: 1, //当前页
                total: null, //记录条数
                size: 4, //每页条数
            },
            dialogVisible1: false,
            dialogVisible2: false,
            typeOptions: [
                { value: "历史", label: "历史" },
                { value: "地理", label: "地理" },
                { value: "政治", label: "政治" },
            ],
            // difficultys: [
            //     { value: "简单", label: "简单" },
            //     { value: "中档", label: "中档" },
            //     { value: "困难", label: "困难" },
            // ]
        };
    },
    created() {
        this.getExamInfo();
    },
    methods: {
        edit(examCode) {
            //编辑试卷
            this.dialogVisible1 = true;
            this.$axios(`/api/exam/${examCode}`).then((res) => {
                //根据试卷id请求后台
                if (res.data.code == 200) {
                    this.form = res.data.data;
                }
            });
        },
        handleClose(done) {
            //关闭提醒
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        submit() {
            //提交修改后的试卷信息
            this.dialogVisible1 = false;
            this.$axios({
                url: "/api/exam",
                method: "put",
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        //成功修改提示
                        message: "更新成功",
                        type: "success",
                    });
                }
                this.getExamInfo();
            });
        },
        deleteRecord(examCode) {
            this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
                confirmButtonText: "确定删除",
                cancelButtonText: "算了,留着",
                type: "danger",
            })
                .then(() => {
                    //确认删除
                    this.$axios({
                        url: `/api/exam/${examCode}`,
                        method: "delete",
                    }).then((res) => {
                        this.getExamInfo();
                    });
                })
                .catch(() => {});
        },
        getExamInfo() {
            //分页查询所有试卷信息
            this.$axios(
                `/api/exams/${this.pagination.current}/${this.pagination.size}`
            )
                .then((res) => {
                    this.pagination = res.data.data;
                })
                .catch((error) => {});
        },
        //改变当前记录条数
        handleSizeChange(val) {
            this.pagination.size = val;
            this.getExamInfo();
        },
        //改变当前页码，重新发送请求
        handleCurrentChange(val) {
            this.pagination.current = val;
            this.getExamInfo();
        },
        //我们使用考试表中的grade字段作为是否选择考试具体参数的字段，若已经为考试设置了具体内容，则无法进行改变，即点不开添加题库这个按钮
        edit2(examCode) {
            // 根据试卷 ID 请求后台数据
            this.$axios(`/api/exam/${examCode}`)
                .then((res) => {
                    if (res.data.code === 200) {
                        this.form = res.data.data; // 将返回的数据赋值给 this.ok

                        // 判断 this.ok.grade 的值
                        if (this.form.grade != 1) {
                            // 如果 grade 不等于 1，则允许打开对话框
                            this.dialogVisible2 = true;
                            this.form.grade = 1;
                        } else {
                            this.$message.warning("无法反复设置");
                            this.dialogVisible2 = false; // 确保对话框保持关闭状态
                        }
                    } else {
                        // 如果请求失败，提示错误信息
                        this.$message.error("获取试卷信息失败，请稍后重试！");
                        this.dialogVisible2 = false; // 确保对话框保持关闭状态
                    }
                })
                .catch((error) => {
                    // 捕获请求错误
                    console.error("请求失败：", error);
                    this.$message.error("网络错误，请检查您的连接！");
                    this.dialogVisible2 = false; // 确保对话框保持关闭状态
                });
        },
        add() {
            this.dialogVisible2 = false;
            this.$axios({
                url: "/api/exam/set",
                method: "post",
                data: {
                    ...this.info,
                },
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        //成功修改提示
                        message: "更新成功",
                        type: "success",
                    });
                }
                this.getExamInfo();
            });
            this.$axios({
                                url: "/api/exam",
                                method: "put",
                                data: {
                                    ...this.form,
                                },
                            }).then((res) => {
                                if (res.data.code == 200) {
                                    this.$message({
                                        //成功修改提示
                                        message: "更新成功",
                                        type: "success",
                                    });
                                }
                            });

        },
    },
};
</script>
<style lang="less" scoped>
.exam {
    padding: 0px 40px;
    .page {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .edit {
        margin-left: 20px;
    }
}
</style>
